<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>借阅管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书借阅添加</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-tabs type="border-card">
        <!-- 借阅添加 -->
        <el-tab-pane>
          <span slot="label">
            <i class="el-icon-date"></i> 添加借阅
          </span>
          <el-row>
            <el-col :span="15">
              <el-form size="small" label-width="100px" :model="formBook" ref="bookAddFrom" class="bookAddFrom">
                <el-form-item label="图书ID">
                  <el-input v-model="formBook.id" @change="idChangeEvent"></el-input>
                </el-form-item>
                <el-form-item label="图书名称">
                  <el-input v-model="formBook.b_title" @change="bookNameChangeEvent"></el-input>
                </el-form-item>
                <el-form-item label="图书作者">
                  <el-input v-model="formBook.b_author" disabled></el-input>
                </el-form-item>
                <el-form-item label="图书出版社">
                  <el-input v-model="formBook.b_publisher" disabled></el-input>
                </el-form-item>
                <el-form-item label="借阅者ID">
                  <el-input v-model="fromUser.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="借阅人">
                  <el-input v-model="fromUser.nickname" @change="userChangeEvent"></el-input>
                </el-form-item>
                <el-form-item label="借阅册数">
                  <el-input value="1" type="Number" disabled></el-input>
                </el-form-item>
                <el-form-item label="借阅时间">
                  <el-input type="text" suffix-icon="el-icon-date" :value="new Date()+''" disabled></el-input>
                </el-form-item>
              </el-form>
              <el-button type="primary" @click="addBorrowClick" size="small">进行借阅</el-button>
              <el-button type="info" @click="resetClick" size="small">重置</el-button>
            </el-col>
            <el-col :span="9">
              <img src="../../assets/imgs/book.jpg" alt/>
            </el-col>
          </el-row>
        </el-tab-pane>
        <!-- 还书添加 -->
        <el-tab-pane label="添加还书">
          <el-form :inline="true" :model="addreturnFrom" size="small">
            <el-form-item label="借阅人">
              <el-input
                v-model="addreturnFrom.username"
                @change="addreturnnameChangeEvent"
                placeholder="借阅人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="借阅图书">
              <el-select v-model="addreturnFrom.book_id" placeholder="借阅图书列表">
                <el-option
                  :label="item.book.b_title"
                  :value="item.book_id"
                  v-for="(item,index) in selectList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitClick" size="small">还书</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  findUserInfo,
  findBook,
  findBorrowList,
  updateBorrowStatus,
  addBorrow
} from "@/request";
import {book, borrow, status, user} from "../../request";

export default {
  data() {
    return {
      formBook: {},
      fromUser: {},
      addreturnFrom: {
        username: "",
        book_id: "",
        user_id: ""
      },
      selectList: []
    };
  },
  methods: {
    /**
     * 充值
     */
    resetClick() {
      this.formBook = {};
      this.fromUser = {};
    },
    /**
     * 图书ID 改变时
     * @param value
     * @returns {Promise<void>}
     */
    async idChangeEvent(value) {
      let data = await book.find({id: value});
      if (data.code != 200) {
        this.formBook = {};
        this.fromBook.id = value;
        this.$message.error("该图书不存在，请重新输入正确的图书ID！");
        return;
      }

      this.formBook = data.data[0];
    },
    /**
     * 图书名称 改变时
     * @param value
     * @returns {Promise<void>}
     */
    async bookNameChangeEvent(value) {
      let data = await book.find({b_title: value});
      if (data.code != status.SUCCESS) {
        this.formBook = {};
        this.fromBook.b_title = value;
        this.$message.error("该图书不存在，请重新输入正确的图书名称！");
        return;
      }

      this.formBook = data.data[0];
    },
    /**
     * 用户名称 改变时
     * @param value
     * @returns {Promise<void>}
     */
    async userChangeEvent(value) {
      let data = await user.find({nickname: value});
      if (data.code != status.SUCCESS) {
        this.fromUser = {};
        this.fromUser.nickname = value;
        this.$message.error("该用户不存在，请重新输入正确的用户姓名！");
        return;
      }

      this.fromUser = data.data[0];
    },
    /**
     * 还书 用户名称 改变时
     */
    async addreturnnameChangeEvent(value) {
      let data = await user.find({nickname: value});
      if (data.code != status.SUCCESS) {
        this.selectList = [];
        this.$message.error("该用户不存在，请重新输入正确的用户姓名！");
        return;
      }
      this.addreturnFrom.user_id = data.data[0].id;

      //获取借书列表
      let result = await borrow.find({user_id: data.data.id});
      if (result.code != status.SUCCESS) {
        this.selectList = [];
        this.$message.error("该用户不存在未还的书！");
        return;
      }
      this.selectList = result.data;
    },
    /**
     * 还书
     */
    async submitClick() {
      let data = await borrow.updateStatus({
        user_id: this.addreturnFrom.user_id,
        book_id: this.addreturnFrom.book_id
      });
      if (data.code != status.SUCCESS) {
        this.$message.success("还书成功");
        this.addreturnFrom = {};
        this.selectList = [];
      }
    },
    /**
     * 借书
     * @returns {Promise<*>}
     */
    async addBorrowClick() {
      if (!this.formBook.id || !this.fromUser.id) return this.$message.error("请输入有效的借阅信息");
      let data = await borrow.add({
        book_id: this.formBook.id,
        user_id: this.fromUser.id
      });
      if (data.code == status.SUCCESS) {
        this.$message.success("借阅成功");
        this.resetClick();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.formValue {
  color: darkblue;
}
</style>
